<template>
  <div class="searchIntro">
    <div class="title"><p>查询说明</p></div>
    <div class="title2">
        <p>VOCs数据查询说明：</p>
    </div>
    <div class="content">
        <p>① 选择需要查询的信息类型或筛选条件</p>
        <p>② 键入需要查询物质的分子式（不区分大小写）并点击搜索</p>
        <p>③ 点击查询结果中分子并获取所需信息</p>
    </div>
    <div class="title2">
        <p>气溶胶数据查询说明：</p>
    </div>
    <div class="content">
        <p>① 选择气溶胶大类及子类类别</p>
        <p>② 在查询结果中选择气溶胶类型</p>
        <p>③ 获取所需生物气溶胶信息</p>
    </div>
  </div>
</template>

<script>
import { convertToSuperscript } from "@/api/formatVoc";
export default {
  methods: {
  converting(str){
    return convertToSuperscript(str)
  }
  }
}
</script>

<style lang="scss" scoped>
@import "../css/character.scss";
@import "../css/common.scss";
.searchIntro{
    .title {
    font-family: #{$about_page_font_family};
    font-size: #{$about_page_font_size}px;
    text-align: left;
    font-size: #{$first_font_size};
    font-weight: #{$first_font_weight};
    margin-top: #{$first_titile_top}px;
    margin-left: #{$first_titile_left}px;
    margin-bottom: #{$first_titile_bottom}px;
    color: rgb(89, 89, 89);
    text-decoration: underline rgb(68, 114, 196) 3px;
  }
  .title2 {
    font-family: #{$about_page_font_family};
    font-size: #{$about_page_font_size}px;
    text-align: left;
    font-size: #{$first_font_size};
    font-weight: #{$first_font_weight};
    margin-top: #{$first_titile_top}px;
    margin-left: #{$second_titile_left}px;
    margin-bottom: #{$first_titile_bottom}px;
    color: rgb(89, 89, 89);
  }
  .content {
    text-align: left;
    // 开头间隔
    text-indent: 20px;
    font-size: #{$second_font_size};
    font-weight: #{$second_font_weight};
    margin-top: #{$first_titile_top}px;
    margin-left: #{$second_titile_left}px;
    margin-bottom: #{$second_titile_bottom}px;
    line-height: #{$about_page_prg}px;
    // p{
    //     margin-bottom: 20px;
    // }
  }
}
</style>